<template>
  <!-- 三级联动地区 -->
  <el-row :gutter="10" type="flex">
    <el-col :span="8">
      <el-select v-model="province" :disabled="disabled" value-key="adcode" @change="onChangeProvince" style="width:100%;">
        <el-option v-for="(item,index) in dataArea" :key="index" :label="item.name" :value="item"></el-option>
      </el-select>
    </el-col>
    <el-col :span="8">
      <el-select v-model="city" :disabled="disabled" value-key="adcode" style="width:100%;" @change="onChangeCity">
        <el-option v-for="(item,index) in toArray(province)" :key="index" :label="item.name" :value="item"></el-option>
      </el-select>
    </el-col>
    <el-col :span="8">
      <el-select v-model="district" :disabled="disabled" value-key="adcode" style="width:100%;" @change="onChangeDistrict">
        <el-option v-for="(item,index) in toArray(city)" :key="index" :label="item.name" :value="item"></el-option>
      </el-select>
    </el-col>
  </el-row>
</template>
<script>
export default {
  props: {
    //支持[{name:"重庆",adcode:"10100"}]
    value: {
      type: Array,
      default: function() {
        return [];
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    //高德数据源
    dataArea() {
      return this.$store.state.areaArray;
    }
  },
  data() {
    return {
      province: null,
      city: null,
      district: null
    };
  },
  methods: {
    //选择省
    onChangeProvince() {
      const th = this;
      th.city = null;
      th.district = null;
      th.$emit("change");
    },
    //选择市
    onChangeCity() {
      const th = this;
      th.district = null;
      th.$emit("change");
    },
    //选择区
    onChangeDistrict() {
      const th = this;
      th.$emit("change");
      th.submit();
    },
    submit() {
      const th = this;
      if (th.district) {
        let arr = [
          { adcode: th.province.adcode, name: th.province.name },
          { adcode: th.city.adcode, name: th.city.name },
          { adcode: th.district.adcode, name: th.district.name }
        ];
        th.$emit("input", arr);
      }
    },
    toArray(obj) {
      const th = this;
      if (obj) return obj.districts;
      else return [];
    },
    //初始化
    onInit() {
      const th = this;
      th.province = th.dataArea.find(d => {
        return d.adcode == th.value[0].adcode;
      });
      th.city = th.province.districts.find(d => {
        return d.adcode == th.value[1].adcode;
      });
      th.district = th.city.districts.find(d => {
        return d.adcode == th.value[2].adcode;
      });
    }
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler: function(n) {
        const th = this;
        //判断长度
        if (n.length != 3) {
          return;
        }
        if (th.dataArea.length == 0) return;
        th.onInit();
      }
    },
    dataArea: {
      deep: true,
      immediate: true,
      handler(n) {
        const th = this;
        if (n.length > 0 && th.value.length > 0) {
          th.onInit();
        }
      }
    }
  }
};
</script>